<template>
    <div class="wrap">
        <!-- 头部 -->
        <header>
            <div class="search">
                <navigator url="/pages/search/index" redirect hover-class="className">
                    搜索
                </navigator>
            </div>
            <div class="GOBACK" @click="BackPage()">返回</div>
        </header>

        <!-- 视频地址 -->
        <!-- <div class="Video">视频</div> -->
        <video  class="Video" src="https://cn-sdjn3-cu-v-01.bilivideo.com/upgcxcode/87/24/354012487/354012487-1-16.mp4?e=ig8euxZM2rNcNbdlhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1624246913&gen=playurlv2&os=vcache&oi=3732976736&trid=000187992e62ebbb412e9b51dc32aefaa87eh&platform=html5&upsig=26a6694f78f704bd20ad5a1aeaf63c62&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&cdnid=8163&mid=286316875&logo=80000000"></video>
        
        <!-- table栏,进行切换 -->
        <div class="TabSelect">
            <span :class="ChangeTabIndex == 1? 'TabSelect_Active' : ''" @click="ChangeTab(1 , 'ChangeTabIndex')">简介</span>
            <span :class="ChangeTabIndex == 2? 'TabSelect_Active' : ''" @click="ChangeTab(2 , 'ChangeTabIndex')">评论{{ detail.View.stat.reply }}</span>
        </div>

        <!-- 视频卡片栏 -->
        <div class="DetailDiv" v-if="ChangeTabIndex == 1">

            <!-- 点击是否展开 -->
            <p class="DetailDiv_text" @click="changeFlag('DetailFlag')">
                <span>
                    {{ detail.View.title }}    
                </span><span>{{ DetailFlag ? '↑' : '↓' }}</span>
            </p>

            <!-- 通过判断是否进行展开操作 -->
            <div  :class="DetailFlag ? 'Detail_Text' : 'Detail_Text_false'" >

                <!-- 详情信息 -->
                <div class="Detail_InFo">

                    <!-- 个人头像 -->
                    <div class="img">
                        <img :src="detail.View.owner.face" alt="">
                    </div>
+
                    <!-- 个人的名字 -->
                    <div class="Detail_InFoText">
                        <p>{{detail.View.owner.name}}</p>
                        <span>{{sumFun(detail.View.stat.like)}}粉丝</span>
                    </div>
                </div>

                <!-- 视频信息 -->
                <div class="Detail_Stat">
                    <span>
                        {{sumFun(detail.View.stat.view)}}观看
                    </span>
                    <span>
                        {{sumFun(detail.View.stat.danmaku)}}弹幕
                    </span>
                    <span>
                        
                    </span>
                    <span class="JiaCun">
                        {{detail.View.bvid}}
                    </span>
                </div>
                {{detail.View.desc}}
                <!-- <div @click="payEvent()">支付</div> -->
            </div>

            <h3 class="ViewInFoSum">
                 <!-- 详情信息 -->
                <div v-if="!DetailFlag" class="Detail_h3_true">
                    <div class="Detail_InFo_h3">

                        <!-- 个人头像 -->
                        <div class="img">
                            <img :src="detail.View.owner.face" alt="">
                        </div>

                        <!-- 个人的名字 -->
                        <div class="Detail_InFoText">
                            <p>{{detail.View.owner.name}}</p>
                        </div>
                    </div>

                    <!-- 播放信息 -->
                    <p>
                        <span>{{sumFun(detail.View.stat.view)}}播放</span>
                        <span><img class="shoucang" src="@/static/detail_icon/shoucangtianchong.png" alt=""></span>
                        <span>分享</span>
                    </p>
                    
                </div>

                <!-- 展开后的播放数据 -->
                <div v-if="DetailFlag" class="Detail_h3_false">

                    <p>
                        <span><img class="shoucang" src="@/static/detail_icon/shoucangtianchong.png" alt="">{{sumFun(detail.View.stat.like)}}</span>
                        <span>分享海报</span>
                        <span @click="forwarding()">分享</span>
                    </p>
                    
                </div>

                <!-- 推荐视频卡片 -->
                <div class="ViewCard">
                    <div class="ViewItem" v-for="(item , index) in detail.Related" :key="item.aid"
                    @click="GoToPage('/pages/Detail_Vido/index')"
                    >
                        <div class="ImgDiv">
                            <img :src="item.pic" :alt="'第' + index + '个'">
                            <div class="ImgViewInFo">
                                <p>
                                    <span><img src="@/static/detail_icon/bofangshu.png" alt="">{{sumFun(item.stat.view)}}</span>
                                    <span><img src="@/static/detail_icon/danmushu.png" alt="">{{sumFun(item.stat.danmaku)}}</span>
                                </p>
                                <p>
                                    <!-- {{item.ctime}} -->
                                    0
                                </p>
                            </div>
                        </div>
                        <p>
                            {{ item.title }}     
                        </p>
                    </div>
                    
                </div>
                
            </h3>

            
        </div>

        <!-- 视频回复栏 -->
        <div class="DetailDiv_text" v-if="ChangeTabIndex == 2">
            <div class="Detail_wrap">

                <div class="Text_Item" v-for="item in data_text.replies" :key="item.rpid">

                    <!-- 回复人头像 -->
                    <div class="Item_Img">
                        <img :src="item.member.avatar" alt="">
                    </div>

                    <div class="Item_Text">
                        <!-- item名字 -->
                        <h5>
                            {{ item.member.uname }}
                        </h5>
                        <!-- item回复内容 -->
                        <span>
                            {{ item.content.message }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>


<script>

import { GetDetail , payEve , Login } from "./../../services/index"
import data from "./../../static/Detaildata.json";
import data_text from "./../../static/Detail_text.json";
export default {
    data() {
        return {
            ChangeTabIndex : 1,
            DetailFlag : false,
            detail : data.data,
            data_text : data_text.data
        }
    },

    created(){
        // this.getData();
        // console.log(uni);
        let a = getCurrentPages();
        console.log(a);
        console.log(this.$mp);
        
    },

    onLaunch:function(){
        
    },

    methods: {

        // 改变下标
        ChangeTab( index , type ){
            this[type] = index;
        } ,

        async getData(){
            let result = await GetDetail();
            console.log( 'result...' , result);
            // console.log( 'log...' , this.detail);
            // console.log(8465132);
        },

        // 改变状态
        changeFlag( type ){
            this[type] = !this[type]
            console.log(this[type]);
        },

        // 计算单位
        sumFun(sum){
            let newSum = sum + ''
            switch(newSum.length){
                case 1 : return newSum ;
                case 5 : 
                    if(newSum[1] == 0)
                    {
                        return newSum[0] + '万'
                    }
                return newSum[0] + '.' + newSum[1] + '万' ;
                case 6 : return '' + newSum[0] + newSum[1] + '.' + newSum[2] + '万'
                case 7 : return '' + newSum[0] + newSum[1] + newSum[2] + '.' + newSum[3] + '万';
                case 8 : return '' + newSum[0] + newSum[1] + newSum[2] + newSum[3] + '.' + newSum[4] + '万';
                case 9 : return '' + newSum[0] + newSum[1] + newSum[2] + newSum[3] + newSum[4] + '.' + newSum[5] + '万';
                default : return newSum;
                
            }
        },

        // 跳转页面
        BackPage(){
            let a = getCurrentPages();
            console.log(a);
            uni.navigateBack();
        },

        // 跳页面
        GoToPage( target ){
            uni.redirectTo({
                url: target,
            });
        },

        forwarding(){
            console.log('分享');
            
        },

        // 支付（测试
        async payEvent(){
            let result = await payEve({total_fee : 1} );
            // debugger;
            console.log(result);
        },
    },
}
</script>

<style lang="scss" scoped>
    .wrap{
        width: 100%;
        height: 100%;
        // background: #fff;
            // background: #ff6767;

    }

    header{
        width: 100%;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .search{
            width: 300rpx;
            height: 60rpx;
            border-radius: 30rpx;
            background: rgb(204, 204, 204);
            text-align: center;
            line-height: 60rpx;
            font-size: 12px;
            color: #fff;
        }

        .GOBACK{
            position: absolute;
            left: 20rpx;
            top: 80rpx;
            // height: 10rpx;
        }
    }

    .Video{
        width: 100%;
        height: 400rpx;
        background: #eee;
    }

    .TabSelect{
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        box-sizing: border-box;
        padding: 0 40rpx;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: left;
        

        >span{
            display: block;
            height: 60rpx;
            font-size: 12px;
            line-height: 60rpx;
            padding: 0 10rpx;
        }

        .TabSelect_Active{
            color: #ff6767;
            border-bottom: 1px solid #ff6767;

        }
    }

    .DetailDiv{
        box-sizing: border-box;
        padding: 0 40rpx;

        >p{
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            word-wrap: break-word;
        }

        .Detail_Text{
            width: 100%;
            min-height: 100rpx;
            overflow: hidden;
            transition: all 2s;
            font-size: 10px;
        }
            .Detail_InFo{
                width: 100%;
                // height: ;
                display: flex;
                align-items: center;
                .img{
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                    overflow: hidden;

                    img{
                        width: 100%;
                        height: 100%;
                    }

                    margin-right: 20rpx;
                }

                .Detail_InFoText{
                    >p{
                        font-size: 16px;
                    }
                    >span{
                        font-size: 12px;
                    }
                }

                margin-bottom: 10rpx;

            }

            .Detail_Stat{
                width: 100%;
                display: flex;

                span{
                    margin-right: 20rpx;
                }

                .JiaCun{
                    font-weight: 800;
                }

                margin-bottom: 10rpx;
            }

        .Detail_Text_false{
            font-size: 10px;
            height: 0rpx;
            overflow: hidden;
            transition: all 2s;

        }

        .Detail_h3_true{
            display: flex;
            justify-content: space-between;

            >p{
                span{
                    font-size: 10px;
                    margin-right: 10rpx;
                }
            }
        }

        .Detail_h3_false{
            display: flex;
            justify-content: space-between;

            >p{
                span{
                    font-size: 12px;
                    margin-right: 12rpx;
                }
            }

            margin-bottom: 10rpx;
        }

        .Detail_InFo_h3{
                width: 50%;
                // height: ;
                display: flex;
                align-items: center;
                .img{
                    width: 50rpx;
                    height: 50rpx;
                    border-radius: 50%;
                    overflow: hidden;

                    img{
                        width: 100%;
                        height: 100%;
                    }

                    margin-right: 20rpx;
                }

                .Detail_InFoText{
                    >p{
                        font-size: 10px;
                    }
                    >span{
                        font-size: 10px;
                    }
                }


                margin-bottom: 10rpx;

            
        }

        .ViewCard{
            width: 100%;
            height: 850rpx;
            // flex: 1;
            overflow: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;


            .ViewItem{
                width: 48%;
                min-height: 200rpx;
                margin-bottom: 20rpx;

                .ImgDiv{
                    width: 100%;
                    height: 200rpx;
                    border-radius: 20rpx;
                    overflow: hidden;
                    margin-bottom: 10rpx;
                    position: relative;

                    

                    .ImgViewInFo{
                        position: absolute;

                        left: 0;
                        bottom: 0;
                        width: 100%;
                        height: 60rpx;
                        font-size: 10px;
                        line-height: 60rpx;
                        display: flex;
                        justify-content: space-between;
                        background: linear-gradient(bottom , #000 , #fff);
                        box-sizing: border-box;
                        pad: 0 10rpx;
                        color: #fff;

                        p{
                            display: flex;

                            span{
                                display: flex;
                                align-items: center;
                                img{
                                    width: 40rpx;
                                    height: 40rpx;
                                }
                                margin-right: 10rpx;
                            }
                        }

                        
                    }

                    img{
                        width: 100%;
                        height: 100%;
                    }
                }

                >p{
                    font-size: 12px;
                }
            }
        }

        
    }

    .DetailDiv_text{
        box-sizing: border-box;
        padding: 0 40rpx;
        
        .Detail_wrap{
            width: 100%;
            height: 800rpx;
            overflow: auto;
        }

        .Text_Item{
            width: 100%;
            // height: 100%;
            display: flex;
            justify-content: left;

            box-sizing: border-box;
            padding: 20rpx 0;

            .Item_Img{
                width: 100rpx;
                height: 100rpx;
                margin: 0 20rpx;
                border-radius: 50%;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                }
            }

            .Item_Text{
                flex: 1;

                h5{
                    color: #ff6767;
                }
                span{
                    font-size: 12px;
                }
            }

            border-bottom: 1px solid #969696;
            margin-bottom: 10rpx;
        }
    }

    .shoucang{
        width: 30rpx;
        height: 30rpx;
    }
    
</style>